<!--
 * @Description: 工单列表
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:12:18
-->
<template>
  <div>

    
    <div class="title">工单列表</div>
    <!-- 搜索按钮 -->
    <div style="text-align: right">
      <div class="search">

      <el-form :inline="true" :model="form" class="demo-form-inline">

        <el-form-item>
          <el-input v-model="form.device_name" placeholder="请输入设备名称"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </el-form-item>

      </el-form>

    </div>
    </div>

    <!-- 表格 -->
    <div class="table">
      <el-table :data="empData" style="width: 100% ;">

        <el-table-column type="index" :index="1" label="序号" width="80"
          align="center"></el-table-column>

        <el-table-column prop="engineer_name" label="工程名称" width="240"
          align="center"></el-table-column>

        <el-table-column prop="device_name" label="设备名称" width="150"></el-table-column>

        <el-table-column prop="bill_why" label="问题描述" align="center">
        </el-table-column>

        <el-table-column prop="status" label="状态" width="150" align="center">
          <template v-slot="scope">
            <div>
              <el-tag v-if="scope.row.status === '进行中'" type="warning">进行中</el-tag>
              <el-tag v-else-if="scope.row.status === '待接单'" type="danger">待接单</el-tag>
              <el-tag v-else type="success">已完成</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="type" label="工单类型" width="180" align="center"></el-table-column>

        <el-table-column label="操作" width="180" align="center">
          <template v-slot="scope">
            <div>

              <el-button type="text" @click="$event => toDetails(scope.row)">详情</el-button>

              <el-button type="text" v-if="scope.row.status === '待接单'"
                @click="toCancel(scope.row.id)">取消</el-button>
              <el-button type="text" v-if="scope.row.status === '进行中' || scope.row.status === '已完成'"
                disabled>取消</el-button>

              <el-button type="text" v-if="scope.row.status === '待接单' "
                @click="$event => toEdit(scope.row.id)">接单</el-button>
              <el-button type="text" v-if="scope.row.status === '进行中' "
                @click="$event => toEdit1(scope.row.id)">完成</el-button>
              <el-button type="text" v-if="scope.row.status === '已完成' " disabled>修改</el-button>

              <el-button type="text" v-if="scope.row.status === '已完成'"
                @click="toDelete(scope.row.id)">删除</el-button>
              <el-button type="text" v-if="scope.row.status === '进行中'|| scope.row.status === '待接单'"
                disabled>删除</el-button>

            </div>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <!-- 分页按钮 -->
    <div class="page" style="margin-top:15px; text-align:right">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="params.page" :page-sizes="[2, 5, 10, 20]" :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total"
        hide-on-single-page></el-pagination>
    </div>

  </div>
</template>

<script>
import { get, postJSON, del } from '@/utils/request'

export default {
    data() {
        return {
            //表单对象
            form: {},
            //设备数据
            empData: [],
            params: {
                page: 1,
                pageSize: 5,
            },
            total: 0,
        }
    },
    computed: {},
    methods: {
        //去修改状态
        toEdit(id) {
            this.$confirm('此操作将修改状态为进行中, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    //发送请求
                    let res = await get('/workorder/takeOrder', { id })
                    this.$message({
                        type: 'success',
                        message: '修改成功!',
                    })
                    //刷新页面为1
                    this.params.page = 1
                    //刷新页面 重新加载数据
                    this.getEmpData()
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消修改!',
                    })
                })
        },

        toEdit1(id) {
            this.$confirm('此操作将修改状态为已完成, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    //发送请求
                    let res = await get('/workorder/finishOrder', { id })
                    this.$message({
                        type: 'success',
                        message: '修改成功!',
                    })
                    //刷新页面为1
                    this.params.page = 1
                    //刷新页面 重新加载数据
                    this.getEmpData()
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消修改!',
                    })
                })
        },

        //跳转到工单详情页面
        toDetails(row) {
            //路由跳转 并传参
            this.$router.push({
                path: '/am/order/Details',
                query: row,
            })
        },

        //去删除已完成工单
        toDelete(id) {
            this.$confirm('此操作将删除该工单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    //发送请求
                    let res = await del('/workorder/deleteById', { id })
                    this.$message({
                        type: 'success',
                        message: '删除成功!',
                    })
                    //刷新页面为1
                    this.params.page = 1
                    //刷新页面 重新加载数据
                    this.getEmpData()
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },

        //去取消待接单工单
        toCancel(id) {
            this.$confirm('此操作将取消该工单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    //发送请求
                    let res = await get('/workorder/cancelOrder', { id })
                    this.$message({
                        type: 'success',
                        message: '操作成功!',
                    })
                    //刷新页面为1
                    this.params.page = 1
                    //刷新页面 重新加载数据
                    this.getEmpData()
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消操作!',
                    })
                })
        },

        //查询工单信息
        async getEmpData() {
            let temp = { ...this.form, ...this.params }
            for (let key in temp) {
                if (!temp[key]) {
                    delete temp[key]
                }
            }

            let res = await get('/workorder/pageQuery', temp)
            this.empData = res.data.list
            this.total = res.data.total
        },
        //数据条数发送变化的函数
        handleSizeChange(pageSize) {
            //console.log(pageSiZe,'条数');
            //当条数发生改变，重新请求工程数据
            //params.pageSize ==》 2
            this.params.pageSize = pageSize
            //重新请求工程数据
            this.getEmpData()
        },
        //页码发送改变的函数
        handleCurrentChange(page) {
            //console.log(page,'页码');
            this.params.page = page
            this.getEmpData()
        },
    },
    created() {},
    mounted() {
        this.getEmpData()
    },
}
</script>
<style>
.title {
    width: 1288px;
    height: 42px;
    background-color: #f4f4f4;
    line-height: 42px;
    padding-left: 14px;
    border-left: 5px solid rgb(248, 128, 128);
}
</style>